
<script>
	// 数据详情页
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		name: 'WeworkQrList'
	})
</script>
<script setup>
import { reqQrStatistics,reqQrStatisticssize,reqQrList } from '@/api'
import {qrListData,qrDataForm,qrDataListData} from '@/data'
	import MyIcon from '@/components/my-icon/index.vue'
	import { ref,reactive } from 'vue'
	import { toRaw } from '@vue/reactivity'


	// 集合数据
	const qrDataSet = reactive({
		today_add_number:'',
		today_lossing_number:'',
		total_add_number:'',
		total_lossing_number:''
	})
	const form = reactive({
		page:1,
		size:10,
		id:[]
	})
	const show = (ids)=>{
		console.log(ids)

		form.id = toRaw(ids)
		reqQrStatisticsapi()
		reqQrStatisticssizeapi()
	}
	
	const handleSizeChange=(val)=>{
		form.size=val
		reqQrStatisticsapi()
	}
	const handleCurrentChange = (val)=>{
		form.page=val
		reqQrStatisticsapi()
	}
	const changeQr = ()=>{
		form.page=1
		reqQrStatisticsapi()
		reqQrStatisticssizeapi()
	}
	// 集合列表
	const qrDataSetList = ref([])
	// qrDataSetList.value = qrDataListData

	const multipleTableRef = ref()
	const multipleSelection = ref([])
	const selectAll = ref(false)
	const total = ref(0)
	const reqQrStatisticsapi=()=>{
		reqQrStatistics(form).then(res=>{
			qrDataSetList.value=res.data.item
			total.value=res.data.count
		})
	}
	
	const reqQrStatisticssizeapi=()=>{
		reqQrStatisticssize(form).then(res=>{
			qrDataSet.today_add_number=res.data.today_add_number
			qrDataSet.today_lossing_number=res.data.today_lossing_number
			qrDataSet.total_add_number=res.data.total_add_number
			qrDataSet.total_lossing_number=res.data.total_lossing_number
		})
	}

	const exportExcel = () => {
		console.log('导出excel')
	}
	// const handleCurrentChange = (val) => {
	// 	console.log(`current page: ${val}分页请求接口`)
	// 	getqrList()
	// }
	const handleSelectAll = () => {
		multipleTableRef.value.clearSelection()
		if (selectAll.value) {
			qrDataSetList.value.forEach((row) => {
				multipleTableRef.value.toggleRowSelection(row, undefined)
			})
		}
	}

	const handleSelectionChange = (val) => {
		multipleSelection.value = val
		if (multipleSelection.value.length == qrDataSetList.value.length) {
			selectAll.value = true
		} else {
			selectAll.value = false
		}
	}
defineExpose({
	show
})

  
</script>

<template>
	<div class="app-edit app-gap-block-top">
    <div class="app-container">
     	<div class="table-title">集合数据</div>
      
			<div class="app-gap-block-top">
				<el-tag class="app-blue-card" style="height: 100px;">
					<div class="app-flex-left">
						<div class="app-card-item app-border-right">
						<div class="app-card-title">{{qrDataSet.today_add_number}}</div>
						<div class="app-card-desc">今日添加客户数(人)</div>
					</div>
					<div class="app-card-item">
						<div class="app-card-item">
						<div class="app-card-title">{{qrDataSet.today_lossing_number}}</div>
						<div class="app-card-desc">今日流失客户数(人)</div>
					</div>
					</div>
					</div>
				</el-tag>
				<el-tag class="app-edit-title-words app-blue-card" style="height: 100px;">
					<div class="app-flex-left">
						<div class="app-card-item app-border-right">
						<div class="app-card-title">{{qrDataSet.total_add_number}}</div>
						<div class="app-card-desc">总添加客户数(人)</div>
					</div>
					<div class="app-card-item">
						<div class="app-card-item">
						<div class="app-card-title">{{qrDataSet.total_lossing_number}}</div>
						<div class="app-card-desc">总流失客户数(人)</div>
					</div>
					</div>
					</div>
				</el-tag>
				

			</div>
				<div class="">
				<div class="table-head app-flex-left">
					<!-- <el-checkbox v-model="selectAll" @change="handleSelectAll" size="large" /> -->
					<span class="app-table-select-font">共{{qrDataSetList.length}}个渠道码 
					<!-- <span class="app-words-tip-weak app-gap-words-left-s">已选择{{multipleSelection.length}}个渠道码</span> -->
					</span>
					<!-- <el-button :disabled="multipleSelection.length==0" class="app-btn" @click="exportExcel">导出Excel</el-button> -->
				</div>
				<el-table class="app-select-table app-container-radius" ref="multipleTableRef" :data="qrDataSetList" style="width:100%"
					@selection-change="handleSelectionChange">
					<!-- <el-table-column type="selection" fixed="left"> -->
					<!-- </el-table-column> -->
					<el-table-column  label="全部渠道码" fixed="left" prop="qrCode">
						<template #default="scope">
							<div class="app-flex-left">
								<img :src="scope.row.merge_qr_code" style="width:60px" />
								<span style="margin-left: 5px;">{{scope.row.name}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="groupname" label="分组"  align="left" />
					<el-table-column prop="today_add_number" label="今日添加客户数(人)"  align="left" />
					<el-table-column prop="today_lossing_number" label="今日流失客户数(人)"  align="left" />
					<el-table-column prop="total_add_number" label="总添加客户数(人)"  align="left" />
					<el-table-column prop="total_lossing_number" label="总流失客户数(人)"  align="left" />
				</el-table>
				<!-- <el-pagination class="app-page" @current-change="handleCurrentChange" background layout="prev, pager, next"
					:total="total" /> -->
					<el-pagination
						:page-sizes="[10, 20, 30, 40]"
						:small="small"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						/>
			</div>

    </div>
    
	<div>
</div>

</div>


</template>
<style lang="scss">
	@import url('../../../../style/app-component.scss');
	@import '../../../../style/mixin.scss';
</style>